<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据采集传感器管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <style>
        .sensor-container {
            padding: 20px;
        }

        .monitor-header {
            margin-bottom: 20px;
            display: flex;
            justify-content: flex-end;
            padding: 0 20px;
        }

        .sensor-list {
            display: flex;
            padding: 20px;
            background: #f5f7fa;
            border-radius: 8px;
            min-height: calc(100vh - 200px);
        }

        .sensor-types {
            flex: 1;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            overflow: auto;
            height: calc(100vh - 250px);
        }

        .sensor-type-item {
            padding: 20px;
            border-bottom: 1px solid #EBEEF5;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
        }

        .sensor-type-item:last-child {
            border-bottom: none;
        }

        .sensor-type-item:hover {
            background: #F5F7FA;
        }

        .sensor-type-item.active {
            background: #ecf5ff;
        }

        .sensor-type-item i {
            font-size: 24px;
            color: #409EFF;
            background: rgba(64, 158, 255, 0.1);
            padding: 10px;
            border-radius: 8px;
        }

        .sensor-info {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .sensor-info-item {
            font-size: 14px;
            color: #606266;
            display: flex;
            align-items: center;
        }

        .sensor-info-item .label {
            color: #909399;
            margin-right: 8px;
            min-width: 45px;
        }

        .sensor-status {
            margin-left: auto;
            padding-left: 15px;
            border-left: 1px solid #EBEEF5;
        }

        .sensor-status .el-tag {
            min-width: 52px;
            text-align: center;
            padding: 0 8px;
            height: 24px;
            line-height: 24px;
            border-radius: 4px;
        }

        .sensor-drawer {
            padding: 20px;
            background: #f5f7fa;
            height: 100%;
        }

        .drawer-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #EBEEF5;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .drawer-actions {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }

        .drawer-header i {
            font-size: 20px;
            color: #409EFF;
        }

        .drawer-title {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
            margin: 0;
        }

        .record-item {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .record-time {
            color: #909399;
            font-size: 13px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .record-time i {
            margin-right: 5px;
            font-size: 16px;
        }

        .record-value {
            font-size: 15px;
            color: #303133;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .record-value:last-child {
            margin-bottom: 0;
        }

        .record-value i {
            color: #409EFF;
            margin-right: 8px;
            font-size: 16px;
        }

        .sensor-card {
            margin-bottom: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
        }

        .sensor-form {
            padding: 20px;
        }

        .form-section {
            margin-bottom: 24px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #ebeef5;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef5;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .form-full-width {
            grid-column: span 2;
        }

        .location-section .el-form-item__label {
            font-weight: normal;
            color: #606266;
        }

        .location-detail {
            margin-top: 15px;
        }

        .form-actions {
            margin-top: 30px;
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #ebeef5;
        }

        .form-actions .el-button {
            min-width: 120px;
            margin: 0 10px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .info-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
        }

        .info-label {
            color: #606266;
            font-size: 14px;
            margin-bottom: 8px;
        }

        .info-value {
            color: #303133;
            font-size: 16px;
            font-weight: bold;
        }

        .location-form {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin-top: 10px;
        }

        .monitor-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .monitor-item {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            text-align: center;
        }

        .monitor-icon {
            font-size: 32px;
            color: #409EFF;
            margin-bottom: 10px;
        }

        .monitor-label {
            color: #606266;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .monitor-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
        }

        .sensor-type-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .sensor-type-card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            transition: all 0.3s;
        }

        .sensor-type-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .sensor-type-header {
            margin-bottom: 20px;
            padding: 0 20px;
            display: flex;
            gap: 10px;
        }

        .sensor-type-icon {
            font-size: 24px;
            margin-right: 10px;
            color: #409EFF;
        }

        .sensor-type-title {
            margin: 0;
            font-size: 16px;
            color: #303133;
        }

        .sensor-type-params {
            margin-top: 10px;
        }

        .param-item {
            margin-bottom: 8px;
            font-size: 14px;
            color: #606266;
        }

        .param-value {
            color: #409EFF;
            font-weight: 500;
        }

        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }
        
        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }

        @media (max-width: 1200px) {
            .sensor-type-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .info-grid,
            .monitor-grid {
                grid-template-columns: 1fr;
            }
            
            .sensor-type-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div id="sensor-management">
        <div class="sensor-container">
            <el-tabs v-model="activeTab">
                <!-- 状态监控标签页 -->
                <el-tab-pane label="状态监控" name="monitor">
                    <!-- 搜索栏 -->
                    <div class="monitor-header">
                        <el-input
                            v-model="searchQuery"
                            placeholder="请输入传感器ID或名称"
                            style="width: 300px; margin-right: 10px;">
                            <el-button slot="append" type="primary" @click="handleSearch">
                                <i class='bx bx-search'></i> 搜索
                            </el-button>
                        </el-input>
                    </div>

                    <div class="sensor-list">
                        <div class="sensor-types">
                            <div 
                                v-for="sensor in sensorList" 
                                :key="sensor.id"
                                class="sensor-type-item"
                                :class="{ active: currentSensor === sensor.id }"
                                @click="handleSensorClick(sensor)">
                                <i :class="getSensorIcon(sensor.type)"></i>
                                <div class="sensor-info">
                                    <div class="sensor-info-item">
                                        <span class="label">ID：</span>
                                        <span>{{sensor.id}}</span>
                                    </div>
                                    <div class="sensor-info-item">
                                        <span class="label">名称：</span>
                                        <span>{{sensor.name}}</span>
                                    </div>
                                    <div class="sensor-info-item">
                                        <span class="label">类型：</span>
                                        <span>{{sensor.typeLabel}}</span>
                                    </div>
                                    <div class="sensor-info-item">
                                        <span class="label">位置：</span>
                                        <span>{{sensor.location}}</span>
                                    </div>
                                </div>
                                <div class="sensor-status">
                                    <el-tag :type="sensor.status === '在线' ? 'success' : 'danger'" size="small">
                                        {{sensor.status}}
                                    </el-tag>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧抽屉 -->
                    <el-drawer
                        :visible.sync="drawer.visible"
                        direction="rtl"
                        size="35%">
                        <div class="sensor-drawer">
                            <div class="drawer-header">
                                <i class='bx bx-chip'></i>
                                <h3 class="drawer-title">{{ drawer.title }}</h3>
                            </div>

                            <!-- 操作按钮 -->
                            <div class="drawer-actions">
                                <el-button type="primary" @click="handleDataQuery">
                                    <i class='bx bx-data'></i> 数据查询
                                </el-button>
                                <el-button type="warning" @click="handleControl">
                                    <i class='bx bx-control-center'></i> 控制
                                </el-button>
                            </div>

                            <div class="record-list">
                                <div v-if="currentSensorType === 'temp_hum'">
                                    <div class="record-item" v-for="(record, index) in tempHumRecords" :key="index">
                                        <div class="record-time">
                                            <i class='bx bx-time'></i>
                                            {{record.time}}
                                        </div>
                                        <div class="record-value">
                                            <i class='bx bx-thermometer'></i>
                                            温度：{{record.temperature}}℃
                                        </div>
                                        <div class="record-value">
                                            <i class='bx bx-droplet'></i>
                                            湿度：{{record.humidity}}%
                                        </div>
                                    </div>
                                </div>
                                <div v-else-if="currentSensorType === 'current'">
                                    <div class="record-item" v-for="(record, index) in currentRecords" :key="index">
                                        <div class="record-time">
                                            <i class='bx bx-time'></i>
                                            {{record.time}}
                                        </div>
                                        <div class="record-value">
                                            <i class='bx bx-pulse'></i>
                                            电流：{{record.value}}A
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-drawer>
                </el-tab-pane>

                <!-- 传感器基础信息 -->
                <el-tab-pane label="传感器基础信息" name="basic">
                    <el-card class="sensor-card">
                        <el-form ref="sensorForm" :model="sensorForm" :rules="sensorRules" label-width="100px" class="sensor-form">
                            <!-- 基本信息部分 -->
                            <div class="form-section">
                                <div class="section-title">基本信息</div>
                                <div class="form-grid">
                                    <el-form-item label="设备ID" prop="deviceId">
                                        <el-input v-model="sensorForm.deviceId" placeholder="请输入设备ID"></el-input>
                                    </el-form-item>
                                    <el-form-item label="网关ID" prop="gatewayId">
                                        <el-input v-model="sensorForm.gatewayId" placeholder="请输入网关ID"></el-input>
                                    </el-form-item>
                                    <el-form-item label="传感器名称" prop="name" class="form-full-width">
                                        <el-input v-model="sensorForm.name" placeholder="请输入传感器名称"></el-input>
                                    </el-form-item>
                                </div>
                            </div>

                            <!-- 位置信息部分 -->
                            <div class="form-section">
                                <div class="section-title">位置信息</div>
                                <div class="location-section">
                                    <el-row :gutter="20">
                                        <el-col :span="8">
                                            <el-form-item label="园区" prop="location.park">
                                                <el-select v-model="sensorForm.location.park" placeholder="请选择园区" clearable @change="handleParkChange">
                                                    <el-option
                                                        v-for="project in parkList"
                                                        :key="project.code"
                                                        :label="project.name"
                                                        :value="project.code">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="分区" prop="location.zone">
                                                <el-select v-model="sensorForm.location.zone" placeholder="请选择分区" clearable @change="handleZoneChange">
                                                    <el-option
                                                        v-for="zone in zoneList"
                                                        :key="zone.name"
                                                        :label="zone.name"
                                                        :value="zone.name">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="8">
                                            <el-form-item label="机房" prop="location.room">
                                                <el-select v-model="sensorForm.location.room" placeholder="请选择机房" clearable>
                                                    <el-option
                                                        v-for="room in roomList"
                                                        :key="room.id"
                                                        :label="room.name"
                                                        :value="room.name">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <div class="location-detail">
                                        <el-form-item label="详细位置" prop="location.detail">
                                            <el-input 
                                                type="textarea" 
                                                v-model="sensorForm.location.detail"
                                                placeholder="请输入详细位置信息"
                                                :rows="2">
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                            </div>

                            <!-- 因子信息部分 -->
                            <div class="form-section">
                                <div class="section-title">因子信息</div>
                                <el-form-item label="因子列表" prop="factors" class="form-full-width">
                                    <el-select v-model="sensorForm.factors" multiple placeholder="请选择因子">
                                        <el-option
                                            v-for="type in sensorTypeList"
                                            :key="type.id"
                                            :label="type.name"
                                            :value="type.id">
                                            <i :class="'bx ' + type.icon"></i>
                                            <span style="margin-left: 8px">{{ type.name }}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>

                            <!-- 表单操作按钮 -->
                            <div class="form-actions">
                                <el-button type="primary" @click="submitSensorForm">保存</el-button>
                                <el-button @click="resetSensorForm">重置</el-button>
                            </div>
                        </el-form>
                    </el-card>
                </el-tab-pane>

                <!-- 传感器因子管理 -->
                <el-tab-pane label="传感器因子管理" name="types">
                    <div class="sensor-type-header">
                        <el-button type="primary" size="small" @click="showAddTypeDrawer">
                            <i class='bx bx-plus'></i> 新增因子
                        </el-button>
                        <el-button type="danger" size="small" @click="handleDeleteType">
                            <i class='bx bx-trash'></i> 删除
                        </el-button>
                    </div>
                    <el-drawer
                        title="新增传感器因子"
                        :visible.sync="typeDrawer.visible"
                        direction="rtl"
                        size="35%"
                        :before-close="handleTypeDrawerClose">
                        <div class="sensor-drawer">
                            <el-form ref="typeForm" :model="typeForm" :rules="typeRules" label-width="100px">
                                <el-form-item label="因子类型" prop="factorType">
                                    <el-select v-model="typeForm.factorType" placeholder="请选择因子类型">
                                        <el-option label="数据类型" value="data"></el-option>
                                        <el-option label="状态类型" value="status"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="图标" prop="icon">
                                    <el-select v-model="typeForm.icon" placeholder="请选择图标">
                                        <el-option label="温度" value="bx-thermometer">
                                            <i class='bx bx-thermometer'></i> 温度
                                        </el-option>
                                        <el-option label="湿度" value="bx-droplet">
                                            <i class='bx bx-droplet'></i> 湿度
                                        </el-option>
                                        <el-option label="光照" value="bx-sun">
                                            <i class='bx bx-sun'></i> 光照
                                        </el-option>
                                        <el-option label="电压" value="bx-bolt">
                                            <i class='bx bx-bolt'></i> 电压
                                        </el-option>
                                        <el-option label="开关" value="bx-toggle-left">
                                            <i class='bx bx-toggle-left'></i> 开关
                                        </el-option>
                                        <el-option label="报警" value="bx-alarm">
                                            <i class='bx bx-alarm'></i> 报警
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="因子名称" prop="name">
                                    <el-input v-model="typeForm.name" placeholder="请输入因子名称"></el-input>
                                </el-form-item>
                                <el-form-item label="因子代码" prop="code">
                                    <el-input v-model="typeForm.code" placeholder="请输入因子代码"></el-input>
                                </el-form-item>
                                
                                <!-- 状态类型特有字段 -->
                                <template v-if="typeForm.factorType === 'status'">
                                    <el-form-item label="状态列表" prop="statusNames">
                                        <el-input
                                            type="textarea"
                                            v-model="typeForm.statusNames"
                                            placeholder="请输入状态名称列表，用逗号分隔"
                                            :rows="3">
                                        </el-input>
                                    </el-form-item>
                                </template>

                                <!-- 数据类型特有字段 -->
                                <template v-if="typeForm.factorType === 'data'">
                                    <el-form-item label="单位" prop="unit">
                                        <el-input v-model="typeForm.unit" placeholder="请输入单位"></el-input>
                                    </el-form-item>
                                    <el-form-item label="数值范围">
                                        <el-col :span="11">
                                            <el-form-item prop="rangeMin">
                                                <el-input v-model="typeForm.rangeMin" placeholder="最小值"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col class="line" :span="2" style="text-align: center">-</el-col>
                                        <el-col :span="11">
                                            <el-form-item prop="rangeMax">
                                                <el-input v-model="typeForm.rangeMax" placeholder="最大值"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="精度" prop="precision">
                                        <el-input-number 
                                            v-model="typeForm.precision" 
                                            :min="0" 
                                            :max="6"
                                            placeholder="请输入精度">
                                        </el-input-number>
                                    </el-form-item>
                                </template>

                                <el-form-item label="描述">
                                    <el-input type="textarea" v-model="typeForm.description" placeholder="请输入描述"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitTypeForm">确认</el-button>
                                    <el-button @click="typeDrawer.visible = false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-drawer>
                    <div class="sensor-type-grid">
                        <div class="sensor-type-card" v-for="type in sensorTypeList" :key="type.id">
                            <div class="sensor-type-header">
                                <i :class="type.icon + ' sensor-type-icon'"></i>
                                <h3 class="sensor-type-title">{{type.name}}</h3>
                            </div>
                            <div class="sensor-type-params">
                                <div class="param-item" v-if="type.range">
                                    量程范围：<span class="param-value">{{type.range}}</span>
                                </div>
                                <div class="param-item" v-if="type.accuracy">
                                    精度：<span class="param-value">{{type.accuracy}}</span>
                                </div>
                                <div class="param-item" v-if="type.status">
                                    状态：<span class="param-value">{{type.status}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#sensor-management',
            data() {
                return {
                    activeTab: 'monitor',
                    searchQuery: '',
                    currentSensor: '',
                    currentSensorType: '',
                    drawer: {
                        visible: false,
                        title: '',
                        sensor: null
                    },
                    typeDrawer: {
                        visible: false
                    },
                    typeForm: {
                        factorType: 'data',
                        icon: '',
                        name: '',
                        code: '',
                        unit: '',
                        description: '',
                        statusNames: '',
                        rangeMin: '',
                        rangeMax: '',
                        precision: 2
                    },
                    typeRules: {
                        factorType: [
                            { required: true, message: '请选择因子类型', trigger: 'change' }
                        ],
                        icon: [
                            { required: true, message: '请选择图标', trigger: 'change' }
                        ],
                        name: [
                            { required: true, message: '请输入因子名称', trigger: 'blur' }
                        ],
                        code: [
                            { required: true, message: '请输入因子代码', trigger: 'blur' }
                        ],
                        unit: [
                            { required: true, message: '请输入单位', trigger: 'blur' }
                        ],
                        statusNames: [
                            { required: true, message: '请输入状态名称列表', trigger: 'blur' }
                        ]
                    },
                    sensorForm: {
                        deviceId: '',
                        gatewayId: '',
                        name: '',
                        location: {
                            park: '',
                            zone: '',
                            room: '',
                            detail: ''
                        },
                        factors: []
                    },
                    sensorRules: {
                        deviceId: [
                            { required: true, message: '请输入设备ID', trigger: 'blur' }
                        ],
                        gatewayId: [
                            { required: true, message: '请输入网关ID', trigger: 'blur' }
                        ],
                        name: [
                            { required: true, message: '请输入传感器名称', trigger: 'blur' }
                        ],
                        'location.park': [
                            { required: true, message: '请选择园区', trigger: 'change' }
                        ],
                        'location.zone': [
                            { required: true, message: '请选择分区', trigger: 'change' }
                        ],
                        'location.room': [
                            { required: true, message: '请选择机房', trigger: 'change' }
                        ],
                        factors: [
                            { required: true, message: '请选择至少一个因子', trigger: 'change' }
                        ]
                    },
                    sensorTypes: [
                        { 
                            value: 'temp_hum', 
                            label: '温湿度传感器', 
                            icon: 'bx-thermometer',
                            onlineCount: 12,
                            totalCount: 15
                        },
                        { 
                            value: 'current', 
                            label: '电流互感器', 
                            icon: 'bx-pulse',
                            onlineCount: 8,
                            totalCount: 10
                        },
                        { 
                            value: 'pressure', 
                            label: '水压传感器', 
                            icon: 'bx-water',
                            onlineCount: 6,
                            totalCount: 6
                        },
                        { 
                            value: 'smoke', 
                            label: '烟雾传感器', 
                            icon: 'bx-cloud',
                            onlineCount: 20,
                            totalCount: 20
                        }
                    ],
                    sensorList: [
                        {
                            id: 'SENSOR001',
                            name: '机房温湿度传感器01',
                            type: 'temp_hum',
                            mcuId: 'MCU001',
                            location: 'A区主控机房',
                            online: true,
                            status: '在线',
                            typeLabel: '温湿度传感器'
                        },
                        {
                            id: 'SENSOR002',
                            name: '配电室电流传感器01',
                            type: 'current',
                            mcuId: 'MCU002',
                            location: 'B区配电室',
                            online: true,
                            status: '在线',
                            typeLabel: '电流互感器'
                        },
                        {
                            id: 'SENSOR003',
                            name: '水泵房压力传感器01',
                            type: 'pressure',
                            mcuId: 'MCU003',
                            location: 'C区水泵房',
                            online: false,
                            status: '离线',
                            typeLabel: '水压传感器'
                        },
                        {
                            id: 'SENSOR004',
                            name: '走廊烟感传感器01',
                            type: 'smoke',
                            mcuId: 'MCU004',
                            location: 'A区走廊',
                            online: true,
                            status: '在线',
                            typeLabel: '烟雾传感器'
                        }
                    ],
                    tempHumRecords: [
                        {
                            time: '2024-01-20 15:30:00',
                            temperature: 25.6,
                            humidity: 45
                        },
                        {
                            time: '2024-01-20 15:25:00',
                            temperature: 25.8,
                            humidity: 46
                        }
                    ],
                    currentRecords: [
                        {
                            time: '2024-01-20 15:30:00',
                            value: 75.8
                        },
                        {
                            time: '2024-01-20 15:25:00',
                            value: 82.3
                        }
                    ],
                    sensorTypeList: [
                        {
                            id: 1,
                            name: '温湿度传感器',
                            icon: 'bx bx-thermometer',
                            range: '-40℃~85℃, 0-100%RH',
                            accuracy: '温度±0.5℃, 湿度±3%RH'
                        },
                        {
                            id: 2,
                            name: '电流互感器',
                            icon: 'bx bx-current',
                            range: '0-100A',
                            accuracy: '±0.5'
                        },
                        {
                            id: 3,
                            name: '水压传感器',
                            icon: 'bx bx-water',
                            range: '0-1.6MPa',
                            accuracy: '±0.1MPa'
                        },
                        {
                            id: 4,
                            name: '烟雾传感器',
                            icon: 'bx bx-cloud',
                            range: '0-1000ppm',
                            accuracy: '-'
                        },
                        {
                            id: 5,
                            name: '光照传感器',
                            icon: 'bx bx-sun',
                            range: '0-200000Lux',
                            accuracy: '±5%'
                        },
                        {
                            id: 6,
                            name: '噪声传感器',
                            icon: 'bx bx-volume-full',
                            range: '30-130dB',
                            accuracy: '±2.5dB'
                        },
                        {
                            id: 7,
                            name: '可燃气体传感器',
                            icon: 'bx bx-wind',
                            range: '50-1000ppm/0~20%LEL',
                            accuracy: '±3%LEL'
                        },
                        {
                            id: 8,
                            name: '人体监测传感器',
                            icon: 'bx bx-body',
                            status: '有人/无人'
                        },
                        {
                            id: 9,
                            name: '智能电表传感器',
                            icon: 'bx bx-plug',
                            status: '支持远程开关控制'
                        },
                        {
                            id: 10,
                            name: '分体空调遥控传感器',
                            icon: 'bx bx-cool',
                            status: '支持温度远程控制'
                        },
                        {
                            id: 11,
                            name: '远程开关传感器',
                            icon: 'bx bx-toggle-left',
                            status: '开/关'
                        },
                        {
                            id: 12,
                            name: '水浸传感器',
                            icon: 'bx bx-droplet',
                            status: '有水浸/无水浸'
                        }
                    ],
                    parkList: [
                        {
                            name: '智慧园区A区',
                            code: 'PARK-001',
                            status: '运行中'
                        },
                        {
                            name: '智慧园区B区',
                            code: 'PARK-002',
                            status: '建设中'
                        }
                    ],
                    zoneList: [],
                    roomList: []
                }
            },
            methods: {
                handleSensorClick(sensor) {
                    this.currentSensor = sensor.id;
                    this.currentSensorType = sensor.type;
                    this.drawer.title = sensor.name;
                    this.drawer.sensor = sensor;
                    this.drawer.visible = true;
                },
                handleSearch() {
                    // 实现搜索逻辑
                    console.log('搜索查询:', this.searchQuery);
                },
                handleDataQuery() {
                    // 实现数据查询逻辑
                    console.log('查询传感器数据:', this.drawer.sensor);
                },
                handleControl() {
                    // 实现控制逻辑
                    console.log('控制传感器:', this.drawer.sensor);
                },
                getSensorIcon(type) {
                    const iconMap = {
                        'temp_hum': 'bx-thermometer',
                        'current': 'bx-pulse',
                        'pressure': 'bx-water',
                        'smoke': 'bx-cloud'
                    };
                    return iconMap[type] || 'bx-help-circle';
                },
                showAddTypeDrawer() {
                    // 实现新增因子逻辑
                    console.log('新增因子');
                    this.typeDrawer.visible = true;
                },
                handleDeleteType() {
                    this.$confirm('此操作将永久删除选中的传感器类型, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 实现删除逻辑
                        this.$message.success('删除成功');
                    }).catch(() => {});
                },
                handleTypeDrawerClose(done) {
                    this.$refs.typeForm.resetFields();
                    this.typeForm.name = '';
                    this.typeForm.code = '';
                    this.typeForm.unit = '';
                    this.typeForm.description = '';
                    done();
                },
                submitTypeForm() {
                    this.$refs.typeForm.validate((valid) => {
                        if (valid) {
                            // 实现保存逻辑
                            console.log('表单数据:', this.typeForm);
                            this.$message.success('保存成功');
                            this.typeDrawer.visible = false;
                        }
                    });
                },
                submitSensorForm() {
                    this.$refs.sensorForm.validate((valid) => {
                        if (valid) {
                            // TODO: 提交表单数据到后端
                            this.$message.success('保存成功');
                        } else {
                            return false;
                        }
                    });
                },
                resetSensorForm() {
                    this.$refs.sensorForm.resetFields();
                },
                handleParkChange(parkCode) {
                    // 当选择园区时，更新分区列表
                    this.sensorForm.location.zone = '';
                    this.sensorForm.location.room = '';
                    if (parkCode) {
                        // 这里应该根据选择的园区获取对应的分区列表
                        // 暂时使用模拟数据
                        this.zoneList = [
                            {
                                name: 'A区办公楼',
                                area: '5000',
                                buildingCount: 2,
                                usage: '办公'
                            },
                            {
                                name: 'A区商业街',
                                area: '3000',
                                buildingCount: 5,
                                usage: '商业'
                            }
                        ];
                    } else {
                        this.zoneList = [];
                    }
                },
                handleZoneChange(zoneName) {
                    // 当选择分区时，更新机房列表
                    this.sensorForm.location.room = '';
                    if (zoneName) {
                        // 这里应该根据选择的分区获取对应的机房列表
                        // 暂时使用模拟数据
                        this.roomList = [
                            {
                                id: 1,
                                name: '主控机房',
                                zone: zoneName,
                                location: '1楼东侧'
                            },
                            {
                                id: 2,
                                name: '网络机房',
                                zone: zoneName,
                                location: '2楼西侧'
                            }
                        ];
                    } else {
                        this.roomList = [];
                    }
                }
            }
        })
    </script>
</body>
</html>